<template>
  <div class="accidentReport">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <h3>报警人基本信息：</h3>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin: 5px 0">
      <el-col :span="12">
        <span>报警人姓名：</span>
        <el-input v-model="input" placeholder="请输入姓名" style="width: 150px"></el-input>
      </el-col>
      <el-col :span="12">
        <span>报警人电话：</span>
        <el-input v-model="input" placeholder="请输入电话" style="width: 150px"></el-input>
      </el-col>
    </el-row>
    <el-row style="margin: 5px 0">
      <el-col :span="24">
        <div class="block">
          <span>接报时间：</span>
          <el-date-picker
            v-model="timeValue"
            type="datetime"
            placeholder="选择日期时间"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 300px">
          </el-date-picker>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin: 5px 0">
      <el-col :span="24">
        <div class="grid-content bg-purple">
          <h3>事故基本信息：</h3>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin: 5px 0">
      <el-col :span="10">
        <span>突发公共事故类型：</span>
        <el-select v-model="typesValue" placeholder="请选择" style="width: 150px">
          <el-option
            v-for="item in types"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="14">
        <span>事故位置：</span>
        <el-input v-model="$store.state.address" placeholder="请输入地址" style="width: 250px"></el-input>
      </el-col>
      <el-col :span="24">
        <span>事故坐标：</span>
        <el-input v-model="$store.state.coordinate" placeholder="请输入坐标" style="width: 250px"></el-input>
      </el-col>
    </el-row>
    <el-row style="margin: 5px 0">
      <el-col :span="24">
        <el-col :span="5">
          <span>事故类型：</span>
        </el-col>
        <el-col :span="19">
          <el-checkbox-group v-model="checkList"  style="width: 250px">
            <el-checkbox label="地质灾害"></el-checkbox>
            <el-checkbox label="气象灾害"></el-checkbox>
            <el-checkbox label="地震灾害"></el-checkbox>
            <el-checkbox label="生物灾害"></el-checkbox>
            <el-checkbox label="海洋灾害"></el-checkbox>
            <el-checkbox label="森林火灾"></el-checkbox>
            <el-checkbox label="火灾"></el-checkbox>
            <el-checkbox label="旱灾"></el-checkbox>
            <el-checkbox label="水灾"></el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-col>
      <el-col :span="24" style="margin: 5px 0">
        <el-col :span="5">
          <span>事故伤亡情况：</span>
        </el-col>
        <el-col :span="19">
          <div>
            <el-col :span="24" style="margin-bottom: 10px">
              <span>死亡：</span>
              <el-input v-model="input"  style="width: 70px"></el-input>
              <span>人</span>
            </el-col>
            <el-col :span="24">
              <span>受伤：</span>
              <el-input v-model="input"  style="width: 70px"></el-input>
              <span>人</span>
            </el-col>
          </div>
        </el-col>
      </el-col>
    </el-row>
    <el-row style="margin: 5px 0">
      <el-col :span="24" style="text-align: center;margin-top: 30px">
        <el-button type="primary" style="margin-right: 70px" @click="report">上报</el-button>
        <el-button type="info">删除</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import Qs from 'qs'
  import axios from 'axios';
  export default {
    name: "accidentReport",
    data(){
      return{
        timeValue: '',
        input:'',
        checkList:[],
        coordinate:'',
        types: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        typesValue: '',
        // coordinate:''
      }
    },
    methods:{
      timeClick(val){
        console.log(val);
      },
      report ()  {
        let testUrl='http://192.168.1.111:1479/r-accident-report/save';
        let data = Qs.stringify({"id":2,'callerName':'sd','reportingTime':this.timeValue,'emergencyType':'','emergencyTypeId':'','accidentType':'','accidentTypeId':'','responseLevel':'','responseLevelId':'','accidentVictimsCount':'','casualtyCount':'','accidentPosition':'','latitudeLogtitude':'','flowNumber':'','gPreplanTemplateId':'','filePath':'','planIsStart':'','comment':''});
        console.log(data);
        axios.post(testUrl,data, {headers:{'Content-Type':'application/x-www-form-urlencoded'}})
          .then((response)=>{
            console.log(response);
          }).catch(error => {
          console.log(error);
          alert('网络错误，不能访问');
        })
      }
    },
    created(){

    }
  }
</script>

<style scoped>
  .el-checkbox{
    margin-left: 30px;
  }
  .accidentReport{
    /*float: left;*/
  }
</style>
